<!DOCTYPE html>
<html>
<head>
    <title>Cylindrical Capacitor Diagram</title>
</head>
<body>
<canvas id="capacitorCanvas" width="550" height="350"></canvas>
<script>
    const canvas = document.getElementById('capacitorCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow
    function drawArrow(context, fromX, fromY, toX, toY, headLength = 8) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        context.moveTo(fromX, fromY);
        context.lineTo(toX, toY);
        context.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        context.moveTo(toX, toY);
        context.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
    }

    // --- Drawing Parameters ---
    const cx = 150;
    const cy = 150;
    const r1 = 30;
    const r2 = 60;
    const length = 280;

    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.fillStyle = 'black';
    
    // --- Draw the Cylinder ---
    ctx.beginPath();
    // Left face (annulus)
    ctx.arc(cx, cy, r2, 0, 2 * Math.PI);
    ctx.moveTo(cx + r1, cy); // Reposition for the inner circle
    ctx.arc(cx, cy, r1, 0, 2 * Math.PI);

    // Body
    ctx.moveTo(cx, cy - r2);
    ctx.lineTo(cx + length, cy - r2);
    ctx.moveTo(cx, cy + r2);
    ctx.lineTo(cx + length, cy + r2);

    // Right cap
    ctx.arc(cx + length, cy, r2, -Math.PI / 2, Math.PI / 2);
    ctx.stroke();

    // --- Draw Labels ---

    // Length 'l'
    ctx.beginPath();
    ctx.moveTo(cx, cy - r2 - 30);
    ctx.lineTo(cx + length, cy - r2 - 30);
    // Ticks
    ctx.moveTo(cx, cy - r2 - 35);
    ctx.lineTo(cx, cy - r2 - 25);
    ctx.moveTo(cx + length, cy - r2 - 35);
    ctx.lineTo(cx + length, cy - r2 - 25);
    ctx.stroke();
    ctx.font = "italic 22px 'Times New Roman'";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('l', cx + length / 2, cy - r2 - 35);

    // Radius R₂
    const angle2 = -115 * Math.PI / 180; // Angle for R2 line (up and left)
    const r2_endX = cx + r2 * Math.cos(angle2);
    const r2_endY = cy + r2 * Math.sin(angle2);
    
    ctx.beginPath();
    // Arc for R2 (from line to vertical-up, CCW)
    ctx.arc(cx, cy, r2 * 0.7, angle2, -Math.PI / 2, false);
    // Radius line with arrow for R2
    drawArrow(ctx, cx, cy, r2_endX, r2_endY);
    ctx.stroke();

    // R₂ Label
    ctx.save();
    ctx.font = "italic 20px 'Times New Roman'";
    ctx.textAlign = 'right';
    ctx.textBaseline = 'bottom';
    ctx.fillText('R', r2_endX - 5, r2_endY - 5);
    ctx.font = "italic 14px 'Times New Roman'";
    ctx.textBaseline = 'top';
    ctx.fillText('2', r2_endX, r2_endY - 5);
    ctx.restore();

    // Radius R₁
    const angle1 = 45 * Math.PI / 180; // Angle for R1 line (down and right)
    const r1_endX = cx + r1 * Math.cos(angle1);
    const r1_endY = cy + r1 * Math.sin(angle1);
    
    ctx.beginPath();
    // Arc for R1 (from vertical-down to line, CW)
    // The image seems to show a CW arc from vertical-up. Let's replicate that visual.
    // It's a small arc in the 4th quadrant in the diagram.
    // We will use an angle in the 4th quadrant and draw a CW arc from vertical-up.
    const angle1_visual = -45 * Math.PI/180;
    const r1_endX_visual = cx + r1 * Math.cos(angle1_visual);
    const r1_endY_visual = cy + r1 * Math.sin(angle1_visual);
    
    ctx.beginPath();
    // Arc for R1 (from vertical-up to line, CW)
    ctx.arc(cx, cy, r1 * 0.7, -Math.PI / 2, angle1_visual, true);
    // Radius line with arrow for R1
    drawArrow(ctx, cx, cy, r1_endX_visual, r1_endY_visual);
    ctx.stroke();
    
    // R₁ Label
    ctx.save();
    ctx.font = "italic 20px 'Times New Roman'";
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.fillText('R', r1_endX_visual + 5, r1_endY_visual + 5);
    ctx.font = "italic 14px 'Times New Roman'";
    ctx.textBaseline = 'bottom';
    ctx.fillText('1', r1_endX_visual + 18, r1_endY_visual + 17);
    ctx.restore();

    // --- Draw Chinese Text ---
    ctx.font = "24px 'KaiTi', 'SimSun'";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('习题 7-64 图', cx + length / 2, cy + r2 + 60);

</script>
</body>
</html>